<template>
    <div class="wrap">
      <!--      <marquee >-->
      <div class="item" v-for="(item,key) in infoList":key="key">
        <el-card  shadow="hover" :body-style="{ padding: '0px' }">
          <div style="width: 300px;height: 300px">
            <el-image style="width: 100%;height: 100%" :src="item.photo" class="image"/>
          </div>
          <div style="padding: 14px;">
            <div class="flex-row flex-align-items-center flex-space-between ai-font-size-mini">
              <span>标题：{{item.title}}</span><el-tag size="mini" type="success">{{item.type}}</el-tag>
            </div>
            <div class="bottom clearfix">
              <time class="time">{{ item.createTime }}</time>
              <el-button type="text" class="button" @click="on(item.id)" >预览文章</el-button>
            </div>
          </div>
        </el-card>
      </div>

      <!--      </marquee>-->
    </div>

</template>

<script>
    import {getProblem} from "../../api/problem";
    import {getEquipment, getEquipmentById, getEquipmentType} from "../../api/equipment";

    export default {
        name: "ArticlePreview",
        data() {
          return {
            currentDate: new Date(),
            infoList:[],
            equipmentType:[]
          }
        },
        mounted() {
          /**
           * 获取维护教程列表
           */
          getProblem().then(res=>{
            console.log(this.infoList)
            this.infoList = res.result
          })

          /**
           * 获取设备类型
           */
          getEquipmentType().then(res =>{
            this.equipmentType = res.result
            console.log(this.equipmentType)
          })
        },methods:{
        /**
         * 预览
         * @param value
         */
        on(value){
          console.log(value)
          this.$router.push({
            path: `/articlePreview/previewPage/${value}`,
          })
        }
      }
    }
</script>

<style lang="scss" scoped>


  .wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item{
      margin: 20px;
      width: 300px;
      height: 400px;
    }

    /*.card{*/
    /*  display: flex;*/
    /*  flex-wrap: wrap;*/
    /*  .car-item{*/
    /*    height: 100px;*/
    /*  }*/
    /*}*/
  }



  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
